<template>
	<view class="index">
		<view class="topImg">
			<img :src="yfsList.thumb" alt="" />
		</view>
		<view class="title">
			<text>{{yfsList.name}}</text>
			<text>￥{{yfsList.price}}/张</text>
		</view>
		<!--  -->
		<view class="lineUp" v-if="queue.length">
			<view class="people">
				当前需排队,前面共{{queue.length}}人
			</view>
			<!-- 	<view class="num">
				点击排队
			</view> -->
		</view>
		<view class="roomBoxTitle">
			<text>切换房间</text>
			<text>共{{yfsList.skuTotal}}箱</text>
		</view>
		<view class="roomBox">
			<view class="room">
				<view v-for="(item,index) in roomList" :key="index" @click="changeRoom(index)"
					:class="{ active: activeRoom === index }">
					{{item}}
				</view>
			</view>
		</view>
		<view class="roomBoxTitle">
			<text>全部赏品</text>
			<text>剩302张/共312张</text>
		</view>
		<view class="itemList">
			<view class="item" v-for="item in yfsSkuVo" v-if="item.id">
				<img :src="item.detailImages" alt="" />
				<h1>{{item.name}}</h1>
				<p>零售价：{{item.moneyPrice}}元</p>
				<!-- <p>概率：2.693%</p> -->
			</view>
		</view>
		<view class="tips">
			<p>
				<svg t="1706430511251" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="5394" width="16" height="16">
					<path
						d="M511.203556 965.518222a452.778667 452.778667 0 0 1-321.251556-133.12A452.778667 452.778667 0 0 1 56.888889 511.260444 452.721778 452.721778 0 0 1 190.008889 190.008889 452.778667 452.778667 0 0 1 511.146667 56.888889a452.778667 452.778667 0 0 1 321.251555 133.12 452.778667 452.778667 0 0 1 133.12 321.194667 452.778667 452.778667 0 0 1-133.12 321.251555 452.778667 452.778667 0 0 1-321.251555 133.12z m0-844.117333c-104.106667 0-201.955556 40.561778-275.626667 114.176a387.242667 387.242667 0 0 0-114.176 275.626667c0 104.106667 40.561778 202.012444 114.176 275.626666a387.242667 387.242667 0 0 0 275.626667 114.176c104.106667 0 202.012444-40.561778 275.626666-114.176a387.242667 387.242667 0 0 0 114.176-275.626666c0-104.106667-40.561778-201.955556-114.176-275.626667a387.242667 387.242667 0 0 0-275.626666-114.176z m0 106.097778c15.701333 0 37.432889 13.653333 37.432888 32.028444v331.832889c0 18.318222-21.731556 32.824889-37.432888 32.824889s-37.432889-14.506667-37.432889-32.824889V259.527111c0-18.375111 21.731556-32.028444 37.432889-32.028444z m5.006222 565.475555a56.888889 56.888889 0 1 1 0-113.777778 56.888889 56.888889 0 0 1 0 113.777778z"
						fill="#f0cead" p-id="5395"></path>
				</svg>
				购买说明
			</p>
			<p>
				<svg t="1706430511251" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="5394" width="16" height="16">
					<path
						d="M511.203556 965.518222a452.778667 452.778667 0 0 1-321.251556-133.12A452.778667 452.778667 0 0 1 56.888889 511.260444 452.721778 452.721778 0 0 1 190.008889 190.008889 452.778667 452.778667 0 0 1 511.146667 56.888889a452.778667 452.778667 0 0 1 321.251555 133.12 452.778667 452.778667 0 0 1 133.12 321.194667 452.778667 452.778667 0 0 1-133.12 321.251555 452.778667 452.778667 0 0 1-321.251555 133.12z m0-844.117333c-104.106667 0-201.955556 40.561778-275.626667 114.176a387.242667 387.242667 0 0 0-114.176 275.626667c0 104.106667 40.561778 202.012444 114.176 275.626666a387.242667 387.242667 0 0 0 275.626667 114.176c104.106667 0 202.012444-40.561778 275.626666-114.176a387.242667 387.242667 0 0 0 114.176-275.626666c0-104.106667-40.561778-201.955556-114.176-275.626667a387.242667 387.242667 0 0 0-275.626666-114.176z m0 106.097778c15.701333 0 37.432889 13.653333 37.432888 32.028444v331.832889c0 18.318222-21.731556 32.824889-37.432888 32.824889s-37.432889-14.506667-37.432889-32.824889V259.527111c0-18.375111 21.731556-32.028444 37.432889-32.028444z m5.006222 565.475555a56.888889 56.888889 0 1 1 0-113.777778 56.888889 56.888889 0 0 1 0 113.777778z"
						fill="#f0cead" p-id="5395"></path>
				</svg>
				开赏记录
			</p>
		</view>
		<view class="bottom">
			<view class="button" @click="open">
				抽1发
			</view>
			<view class="button">
				抽3发
			</view>
			<view class="button">
				抽10发
			</view>
			<view class="button" id="all">
				抱箱
			</view>
		</view>
		<view class="gift">
			再抽6次获得赠品
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pay">
				<h3>{{yfsList.name}}</h3>
				<view class="price">
					<text>单价：</text>
					<text>￥{{yfsList.price}}</text>
				</view>
				<view class="num">
					<text>数量：</text>
					<text>购1发</text>
				</view>
				<view class="preferential">
					<text>可用红包：</text>
					<text>暂无可用红包</text>
				</view>
				<view class="sum">
					<text></text>
					<text>小计：￥{{yfsList.price}}</text>
				</view>
				<view class="agree">
					<text>
						<checkbox color="rgb(240, 206, 173)" background-color="#151515"
							border-color="rgb(240, 206, 173)" activeBackgroundColor="#151515"
							activeBorderColor="rgb(240, 206, 173)" />
					</text>
					我已阅读并同意<u>《用户使用协议》</u>
				</view>
				<view class="button" @click="submitPay()">
					确认购买
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		yfsDetails,
		lineUp,
		pay
	} from "@/api/blind.js";
	import {
		$getStorage,
		$setStorage,
		$removeStorage
	} from "@/utils/auth.js";
	export default {
		data() {
			return {
				activeRoom: 0,
				roomList: ['A赏', 'B赏', 'C赏', 'D赏', 'E赏', 'F赏', 'G赏', 'H赏', 'I赏', 'J赏'],
				boxId: null,
				yfsList: []
			}
		},
		onLoad(e) {
			console.log(e);
			this.boxId = e.boxId;
			yfsDetails(this.boxId).then(res => {
				this.yfsList = res.data.box
				// 商品信息
				this.yfsSkuVo = res.data.box.boxSkuVo
				// 排队信息
				this.queue = res.data.queue
			})
			lineUp(this.boxId).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000,
					});
				}
			})
		},
		methods: {
			changeRoom(index) {
				this.activeRoom = index;
			},
			choose() {
				uni.showModal({
					title: '有确认取消的弹窗',
					content: '确认要删除该项吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('点击了确认')
						} else {
							console.log('点击了取消')
						}
					}
				})
			},
			open() {
				this.$refs.popup.open('bottom')
			},
			submitPay(){
				let ment = {
					totalMoney: this.yfsList.price,
					couponsId: "",
					payMoney: this.yfsList.price
				}
				uni.showLoading({
					title: '正在支付中...'
				})
				pay(ment).then((res) => {
					if (res.code == 200) {
						// 关闭确认支付的弹框
						this.$refs.popup.close()
						// 存储盒子信息
						$setStorage('yfsList', JSON.stringify(this.yfsList));
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 4000,
						});
						// 延时跳转到抽奖页面
						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/blind/index2/index2?type=' + "yfs"
							});
						}, 2000);
					} else if(res.code==500){
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 4000,
						});
					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #151515;
	}

	.topImg {
		width: 100%;
		height: 360rpx;

		img {
			width: 100%;
			height: 360rpx;
		}
	}

	.title {
		margin-top: -100rpx;
		font-weight: 100;
		font-size: 30rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		line-height: 100rpx;
		background: rgba(0, 0, 0, 0.6);
		color: rgb(240, 206, 173);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6rpx);

		text:nth-child(1) {
			color: #adafc1;
		}
	}

	.roomBoxTitle {
		box-sizing: border-box;
		padding: 0 20rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #adafc1;
		font-weight: 100;
		font-size: 26rpx;

		text:nth-child(1) {
			font-size: 30rpx;
			font-weight: 900;
			background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.lineUp {
		width: 100%;
		padding: 0 20rpx;
		color: rgb(240, 206, 173);

		.num {
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			margin: 20rpx 0;
			color: rgb(240, 206, 173);
			border: 3rpx solid rgb(240, 206, 173);
			background-image: -webkit-linear-gradient(-45deg, rgb(69, 51, 27), rgb(20, 15, 6));
		}
	}

	.roomBox {
		width: 100%;
		overflow: scroll;

		.room {
			margin-top: 30rpx;
			display: flex;
			width: 200%;
			justify-content: start;
			box-sizing: border-box;
			padding: 0 20rpx;

			view {
				border: 3rpx solid #565656;
				box-sizing: border-box;
				margin-right: 30rpx;
				color: #565656;
				width: 100rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-weight: 100;
				font-size: 30rpx;
				text-align: center;
				border-radius: 5rpx;
				background-image: -webkit-linear-gradient(-45deg, rgb(32, 33, 33), rgb(3, 3, 3));
			}

			.active {
				color: rgb(240, 206, 173);
				border: 3rpx solid rgb(240, 206, 173);
				background-image: -webkit-linear-gradient(-45deg, rgb(69, 51, 27), rgb(20, 15, 6));
			}
		}
	}

	.itemList {
		width: 100%;
		height: 750rpx;
		margin-top: 30rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		overflow-y: auto;

		.item {
			width: 165rpx;
			height: 350rpx;
			background: rgb(26, 23, 36);
			border: 3rpx solid #5d4748;
			margin-bottom: 20rpx;
			border-radius: 10rpx;

			img {
				width: 150rpx;
				height: 223rpx;
				display: block;
				margin: 10rpx auto;
				border-radius: 20rpx;
			}

			h1 {
				font-size: 26rpx;
				text-align: center;
				color: #ececec;
			}

			p {
				font-size: 23rpx;
				text-align: center;
				font-weight: 100;
				color: #adafc1;
			}
		}
	}

	.tips {
		color: rgb(240, 206, 173);
		display: flex;
		width: 50%;
		justify-content: space-between;
		margin: 0 auto;
		font-weight: 100;
		font-size: 30rpx;

		p {
			display: flex;
			align-items: center;
		}
	}

	.bottom {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;

		.button {
			width: 160rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-weight: 900;
			font-size: 35rpx;
			text-align: center;
			border-radius: 5rpx;
			color: rgb(199, 198, 176);
			border: 3rpx solid rgb(199, 198, 176);
			background-image: -webkit-linear-gradient(-45deg, rgb(61, 65, 62), rgb(43, 44, 46));
		}

		#all {
			color: rgb(240, 206, 173);
			border: 3rpx solid rgb(240, 206, 173);
			background-image: -webkit-linear-gradient(-45deg, rgb(69, 51, 27), rgb(20, 15, 6));
		}
	}

	.gift {
		width: 50%;
		margin: 30rpx auto 0;
		text-align: center;
		border-radius: 50rpx;
		color: rgb(240, 206, 173);
		font-weight: 100;
		font-size: 25rpx;
		padding: 5rpx 0;
		background-image: -webkit-linear-gradient(-45deg, rgb(69, 51, 27), rgb(20, 15, 6));
	}

	.pay {
		width: 100%;
		height: 700rpx;
		background-color: #151515;
		border-radius: 50rpx 50rpx 0 0;
		border: 3rpx solid #5d4748;

		h3 {
			margin: 30rpx 0 50rpx;
			text-align: center;
			color: #adafc1;
		}

		.price {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			color: #adafc1;
			margin-bottom: 20rpx;
			font-weight: 100;

			text:nth-child(2) {
				font-weight: 900;
				// background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
			}
		}

		.num {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			color: #adafc1;
			margin-bottom: 20rpx;
			font-weight: 100;
		}

		.preferential {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			color: #adafc1;
			margin-bottom: 20rpx;
			font-weight: 100;

			text:nth-child(2) {
				color: #6f707b;
			}
		}

		.redPack {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #adafc1;
			margin-bottom: 20rpx;
			font-weight: 100;

			text:nth-child(2) {
				font-weight: 900;
				// background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
				display: flex;
				align-items: center;
				height: 100%;
			}
		}

		.sum {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			color: #adafc1;
			margin-bottom: 20rpx;
			font-weight: 100;

			text:nth-child(2) {
				font-weight: 900;
				background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.agree {
			color: #adafc1;
			font-size: 25rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				transform: scale(0.6);
				display: block;
			}

			u {
				color: rgb(240, 206, 173);
			}
		}

		.button {
			width: 560rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin: 30rpx auto;
			font-weight: 900;
			font-size: 35rpx;
			text-align: center;
			border-radius: 5rpx;
			color: rgb(240, 206, 173);
			border: 3rpx solid rgb(240, 206, 173);
			background-image: -webkit-linear-gradient(-45deg, rgb(69, 51, 27), rgb(20, 15, 6));
		}
	}
</style>